<!-- 基本资料 -->
<template>
  <div>
    <a-card title="基本资料" :bordered="false">
      <a-form-model ref="formRef1" :model="formData" :rules="formRules" layout="vertical">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-model-item label="供应商全称" prop="supplierFullName">
              <a-input v-model="formData.supplierFullName" :disabled="formDisabled.base" placeholder="请输入供应商全称" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="供应商简称" prop="supplierShortName">
              <a-input v-model="formData.supplierShortName" :disabled="formDisabled.base" placeholder="请输入供应商简称" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="供应商主营品类" prop="supplierMainCategory">
              <a-input v-model="formData.supplierMainCategory" :disabled="formDisabled.base" placeholder="请输入供应商主营品类" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="供应商编号" prop="supplierCode">
              <a-input v-model="formData.supplierCode" :disabled="formDisabled.base" placeholder="请输入供应商编号" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-model-item label="联系地区" prop="contactArea">
              <a-cascader v-model="formData.contactArea" :disabled="formDisabled.base" :options="contactAreaOptions" placeholder="请选择联系地区" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="地址" prop="address">
              <a-input v-model="formData.address" :disabled="formDisabled.base" placeholder="请输入地址" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
    <a-card title="收款信息" :bordered="false">
      <a-form-model ref="formRef2" :model="formData" :rules="formRules" layout="vertical">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-model-item label="开户行" prop="depositBank">
              <a-input v-model="formData.depositBank" :disabled="formDisabled.col" placeholder="请输入开户行" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="收款账号" prop="receivablesAccount">
              <a-input v-model="formData.receivablesAccount" :disabled="formDisabled.col" placeholder="请输入收款账号" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="收款人" prop="receivablesPerson">
              <a-input v-model="formData.receivablesPerson" :disabled="formDisabled.col" placeholder="请输入收款人" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
    <a-card title="工商信息" :bordered="false">
      <a-form-model ref="formRef3" :model="formData" :rules="formRules" layout="vertical">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-model-item label="统一社会信用代码" prop="uscCode">
              <a-input v-model="formData.uscCode" :disabled="formDisabled.ic" placeholder="请输入统一社会信用代码" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="法定代表人" prop="legalRepresentative">
              <a-input v-model="formData.legalRepresentative" :disabled="formDisabled.ic" placeholder="请输入法定代表人" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="员工人数" prop="employeeNum">
              <a-input-number v-model="formData.employeeNum" :disabled="formDisabled.ic" :precision="0" :min="0" placeholder="请输入员工人数" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="营业收入" prop="operatingIncome">
              <div class="input-number-with-unit">
                <a-input-number
                  v-model="formData.operatingIncome"
                  :disabled="formDisabled.ic"
                  :min="0"
                  :precision="2"
                  :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                  :parser="value => value.replace(/\$\s?|(,*)/g, '')"
                  placeholder="请输入营业收入"
                />
                <div class="unit">万元</div>
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-model-item label="注册日期" prop="registeredDate">
              <a-date-picker v-model="formData.registeredDate" :disabled="formDisabled.ic" placeholder="请输入注册日期" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="成立日期" prop="establishmentDate">
              <a-date-picker v-model="formData.establishmentDate" :disabled="formDisabled.ic" placeholder="请输入成立日期" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="电话" prop="phone">
              <a-input v-model="formData.phone" :disabled="formDisabled.ic" placeholder="请输入电话" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="地址" prop="address2">
              <a-input v-model="formData.address2" :disabled="formDisabled.ic" placeholder="请输入地址" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-model-item label="邮箱" prop="mailbox">
              <a-input v-model="formData.mailbox" :disabled="formDisabled.ic" placeholder="请输入邮箱" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="注册资本" prop="registeredCapital">
              <a-input-number
                v-model="formData.registeredCapital"
                :disabled="formDisabled.ic"
                :min="0"
                :precision="2"
                :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                :parser="value => value.replace(/\$\s?|(,*)/g, '')"
                placeholder="请输入注册资本"
              />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="实缴资本" prop="paidCapital">
              <a-input-number
                v-model="formData.paidCapital"
                :disabled="formDisabled.ic"
                :min="0"
                :precision="2"
                :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                :parser="value => value.replace(/\$\s?|(,*)/g, '')"
                placeholder="请输入实缴资本"
              />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-model-item label="企业性质" prop="enterpriseNature">
              <a-input v-model="formData.enterpriseNature" :disabled="formDisabled.ic" placeholder="请输入企业性质" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-model-item label="经营范围" prop="businessScope">
              <a-textarea v-model="formData.businessScope" :disabled="formDisabled.ic" placeholder="请输入经营范围" :autosize="{ minRows: 4, maxRows: 6 }" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
    <!-- 变更信息 -->
    <AlterInfo v-if="isAlterApply" />
    <div class="footer-box space-btn">
      <template v-if="isAlterApply">
        <a-button type="primary" @click="onSubmit">提交</a-button>
        <a-button @click="onCancel">取消</a-button>
      </template>
      <template v-else>
        <AlterApply @alterApply="onAlterApply" /><!-- 变更申请 -->
        <a-popover title="变更日志" trigger="click">
          <template slot="content">
            <JournalInfo />
          </template>
          <a-button>变更日志</a-button>
        </a-popover>
      </template>
    </div>
  </div>
</template>

<script>
import AlterInfo from '@views/supplier-manage/effect/components/AlterInfo.vue';
import AlterApply from '@views/supplier-manage/effect/components/AlterApply.vue';
import JournalInfo from '@views/supplier-manage/effect/components/JournalInfo.vue';

export default {
  name: 'SiteInspection',
  components: {
    AlterInfo,
    AlterApply,
    JournalInfo
  },
  data() {
    return {
      contactAreaOptions: [
        {
          value: '1',
          label: '北京市',
          children: [
            {
              value: '11',
              label: '东城区',
            },
            {
              value: '12',
              label: '西城区',
            },
            {
              value: '13',
              label: '朝阳区',
            },
          ],
        },
        {
          value: '2',
          label: '广东省',
          children: [
            {
              value: '21',
              label: '广州市',
              children: [
                {
                  value: '211',
                  label: '白云区',
                },
                {
                  value: '212',
                  label: '天河区',
                },
                {
                  value: '213',
                  label: '海珠区',
                },
                {
                  value: '214',
                  label: '越秀区',
                },
              ],
            },
          ],
        },
      ],
      formData: {
        // 基本资料
        supplierFullName: '',
        supplierShortName: '',
        supplierMainCategory: '',
        supplierCode: '',
        contactArea: [],
        address: '',
        // 收款信息
        depositBank: '',
        receivablesAccount: '',
        receivablesPerson: '',
        // 工商信息
        uscCode: '',
        legalRepresentative: '',
        employeeNum: '',
        operatingIncome: '',
        registeredDate: null,
        establishmentDate: null,
        phone: '',
        address2: '',
        mailbox: '',
        registeredCapital: '',
        paidCapital: '',
        enterpriseNature: '',
        businessScope: '',
        // 备注说明
        remark: ''
      },
      formRules: {
        // 基本资料
        supplierFullName: [{ required: true, message: '请输入供应商全称！', trigger: 'change' }],
        supplierShortName: [{ required: true, message: '请输入供应商简称！', trigger: 'change' }],
        supplierMainCategory: [{ required: true, message: '请输入供应商主营品类！', trigger: 'change' }],
        supplierCode: [{ required: true, message: '请输入供应商编号！', trigger: 'change' }],
        contactArea: [{ required: true, message: '请选择联系地区！', trigger: 'change' }],
        address: [{ required: true, message: '请输入地址！', trigger: 'change' }],
        // 收款信息
        depositBank: [{ required: true, message: '请输入开户行！', trigger: 'change' }],
        receivablesAccount: [{ required: true, message: '请输入收款账号！', trigger: 'change' }],
        receivablesPerson: [{ required: true, message: '请输入收款人！', trigger: 'change' }],
        // 工商信息
        uscCode: [{ required: true, message: '请输入统一社会信用代码！', trigger: 'change' }],
        legalRepresentative: [{ required: true, message: '请输入法定代表人！', trigger: 'change' }],
        employeeNum: [{ required: true, message: '请输入员工人数！', trigger: 'change' }],
        operatingIncome: [{ required: true, message: '请输入营业收入！', trigger: 'change' }],
        registeredDate: [{ required: true, message: '请输入注册日期！', trigger: 'change' }],
        establishmentDate: [{ required: true, message: '请输入成立日期！', trigger: 'change' }],
        phone: [{ required: true, message: '请输入电话！', trigger: 'change' }],
        address2: [{ required: true, message: '请输入地址！', trigger: 'change' }],
        mailbox: [{ required: true, message: '请输入邮箱！', trigger: 'change' }],
        registeredCapital: [{ required: true, message: '请输入注册资本！', trigger: 'change' }],
        paidCapital: [{ required: true, message: '请输入实缴资本！', trigger: 'change' }],
        enterpriseNature: [{ required: true, message: '请输入企业性质！', trigger: 'change' }],
        businessScope: [{ required: true, message: '请输入经营范围！', trigger: 'change' }],
      },
      isAlterApply: false, // 是否 变更申请
      formDisabled: {
        base: true,
        col: true,
        ic: true,
      }
    };
  },
  mounted() {
  },
  methods: {
    onAlterApply(data) {
      this.isAlterApply = data.some(item => item.isSelect);
      data.forEach(item => {
        if (item.isSelect) {
          this.formDisabled[item.value] = false;
        } else {
          this.formDisabled[item.value] = true;
        }
      })
    },
    onSubmit() {
      let eidtFormNum = 0;
      let validateNum = 0;
      const formList = ['base', 'col', 'ic']
      formList.forEach((item, index) => {
        if (!this.formDisabled[item]) {
          eidtFormNum++;
          this.$refs[`formRef${index + 1}`].validate((valid) => {
            if (valid) validateNum++;
          });
        }
      })

      if (eidtFormNum) {
        if (eidtFormNum === validateNum) {
          this.formDisabled.base = true;
          this.formDisabled.col = true;
          this.formDisabled.ic = true;
          this.isAlterApply = false;
          this.$message.success(`操作成功`);
        } else {
          this.$message.error(`请把表单补充完整！`);
        }
      }
    },
    onCancel() {
      this.$refs.formRef1.resetFields();
      this.$refs.formRef2.resetFields();
      this.$refs.formRef3.resetFields();
      this.formDisabled.base = true;
      this.formDisabled.col = true;
      this.formDisabled.ic = true;
      this.isAlterApply = false;
    }
  }
}
</script>

<style lang="less" scoped>
.input-number-with-unit {
  display: flex;
  align-items: center;
  .unit {
    flex-shrink: 0;
    margin-left: 10px;
  }
}

.footer-box {
  height: 50px;
  line-height: 50px;
  border-radius: 0px 0px 8px 8px;
  background-color: rgba(31, 127, 227, 0.08);
  color: rgba(16, 16, 16, 1);
  text-align: center;
  border: 1px solid rgba(204, 204, 204, 1);
}
</style>